<template>
  <div>
    <el-dialog
        :model-value="modelValue"
        title="提示"
        width="20%"
        @close="closed"
    >
      <p class="title">主题更换</p>
      <el-color-picker class="color-container" :predefine="predefineColors" v-model="color"/>
      <template #footer>
        <el-button @click="handleConfirm">确定</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {defineProps, defineEmits, ref} from 'vue';
import {generateColors} from '@/utils/theme';
// import {useStore} from 'vuex';
import {getItem} from '@/utils/cookies';
// import {generateNewStyle, writeNewStyle} from '@/utils/theme';

// const store = useStore();
defineProps({
  modelValue: {
    type: Boolean,
    default: false,
    required: true
  }
});
const color = ref(getItem('mainColor'));
const emits = defineEmits(['update:modelValue']);

// 预定义颜色
const predefineColors = [
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577'
];

// 关闭的时候将父组件的值改为false
const closed = () => {
  emits('update:modelValue', false);
};
// 取消按钮
const handleCancel = () => {
  closed();
};
// 确认按钮
const handleConfirm = async () => {

  const arr = generateColors(color.value);
  // document.documentElement 是全局变量时
  const el = document.documentElement;
  // 获取 css 变量
  getComputedStyle(el).getPropertyValue('--el-color-primary');
  // 设置 css 变量
  el.style.setProperty('--el-color-primary', color.value);
  Object.keys(arr).forEach(e=>{
    el.style.setProperty(`--el-color-primary-${e}`, arr[e]);
  });
};
</script>

<style scoped lang="scss">
:deep(.el-dialog__body) {
  text-align: center;

  p {
    margin-bottom: 20px;
  }
}
</style>
